<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*伪类选择器*/
        /*找到section的直接父元素，然后从直接父元素里查找第几个子元素*/
        section:nth-child(1){
            color: red;
        }
        section:nth-child(3){
            color: green;
        }
        section:nth-child(6){
            color: orange;
        }
        section:first-child{

        }
        section:last-child{
            
        }

        /*找到所有同级的p，然后从找到的p里面查找第几个*/
        p:nth-of-type(1){
            color: blue;
        }
        p:first-of-type{

        }
        p:last-of-type{

        }
    </style>
</head>
<body>
    <header></header>
    <main>
        <section>
            12123
            <p>1111</p>
            <p>222</p>
        </section>

        <p>12312</p>

        <section>Dsf</section>

        <p>dsfds</p>
        <p>dsfds</p>

        <span>sfsd</span>

        <section>dzd</section>
    </main>
    <footer></footer>
</body>
</html>